<template>
    <div class="app-container" v-loading="listLoading">
        <el-form ref="form" label-width="80px">
            <el-row :gutter="20">
                <el-col :span="4">
                   <div style="height: 1px;"></div>
                </el-col>
                <el-col :span="4">
                    <div style="height: 1px;"></div>
                </el-col>

                <el-col :span="6">
                    <div style="height: 1px;"></div>
                </el-col>
             
                <el-col :span="6">
                    <div style="height: 1px;"></div>
                </el-col>

                <el-col :span="4">
                    <el-select v-model="app_id" placeholder="选择项目">
                        <el-option
                        v-for="item in projectList"
                        :key="item.app_id"
                        :label="item.name"
                        :value="item.app_id">
                        </el-option>
                    </el-select>
                </el-col>
               
            </el-row>

        </el-form>


        <el-tabs v-model="activeName" style="margin-top: 30px;height: calc(100vh - 200px);overflow: auto;" type="border-card">
            
            <el-tab-pane label="浸润线示意图" name="1">
                
                <template v-for="json in beachList">

                    <div class="echarts_title">
                        <span>{{json.name}}</span>
                    </div>
                    <div v-if="json.face_img" id="echarts" class="echarts" style="width: 800px;height: 304px;margin: 60px auto;" :style="{'background-image':'url('+json.face_img+')','background-size':'100% 100%' }">

                  
            
                        <template v-for="(item,index) in json.devices">
                            <el-popover
                                placement="top-start"
                                :open-delay="1000"
                                width="100"
                                :style="{'position':'absolute', 'top':(item.face_img_coordinate_info.imgY-50)+'px','left':(item.face_img_coordinate_info.imgX)+'px'}"
                                trigger="hover">
                                <div class="content_div" >
                                    <div class="cd_title">
                                        <span>{{item.device_name}}</span>
                                    </div>
                                    <div class="cd_txt">
                                        <span>水柱：{{item.water_level}}m</span>
                                    </div>
                                    <div class="cd_txt">
                                        <span>孔深：{{item.sand_deep}}m</span>
                                    </div>
                                    <div class="cd_txt">
                                        <span>埋深：{{item.soakage}}m</span>
                                    </div>
                                    <div class="cd_txt">
                                        <span style="color: blue;">蓝色预警：{{item.blue}}m</span>
                                    </div>
                                    <div class="cd_txt">
                                        <span style="color: orange;">橙色预警：{{item.orange}}m</span>
                                    </div>
                                    <div class="cd_txt">
                                        <span style="color: #ffd600;">黄色预警：{{item.yellow}}m</span>
                                    </div>
                                    <div class="cd_txt">
                                        <span style="color: red;">红色预警：{{item.red}}m</span>
                                    </div>
                                </div>
                            
                                <div class="divm_div" slot="reference" >

                                    <div class="divm_txt">
                                        <div class="divm_txt_main">
                                            <span>{{item.device_name}}：{{item.soakage}}m</span>
                                        </div>
                                        
                                    </div>
                                </div>
                            </el-popover>
                        
                        </template>
                   

                        <div class="water_div" style="top: 40px;">
                            <span>库水位:{{dryBeachInfo.ksw_elevation_h}}m</span>
                        </div>
                        <div class="water_div" style="right: 300px;top: 10px;">
                            <span>干滩高程:{{dryBeachInfo.gt_elevation_h}}m</span>
                        </div>
                    </div>
                </template>
                
            </el-tab-pane>
            <el-tab-pane label="干滩剖面图" name="2">

            
                <div v-if="dryBeachInfo.view_img" id="echarts" style="width: 900px;height: 368px;margin: 60px auto;" :style="{background:'url('+dryBeachInfo.view_img+')','background-size':'100% 100%' }">
                    <div class="water_xian">

                    </div>
                    <div class="water_shuxian">

                    </div>

                    <div class="water_div" style="right: 210px;top: 30px;">
                        <span>干滩长度:{{dryBeachInfo.dry_beach_length}}m</span>
                    </div>
                    <div class="water_div" style="right: 415px;top: 30px;">
                        <span>干滩高程:{{dryBeachInfo.gt_elevation_h}}m</span>
                    </div>
                    <div class="water_div" style="right: 255px;top: 60px;">
                        <span>坡比:{{dryBeachInfo.dry_beach_slope}}</span>
                    </div>
                    <div class="water_div" style="right: 80px;top: 50px;">
                        <span>安全超高:{{dryBeachInfo.safe_h}}m</span>
                    </div>
                    <div class="water_div" style="right: 60px;top: 80px;">
                        <span>库水位:{{dryBeachInfo.ksw_elevation_h}}m</span>
                    </div>
                </div>

                <div class="tab_content">
                    <div class="tabc_title">
                        <span>历史数据</span>
                    </div>
                    <div class="tabc_div">
                        <span>设备:{{deviceInfo.name}}，采集时间:{{getTimeCount()}}</span> 
                    </div>
                    <div class="tablc_head">
                        <div :id="'echarts_gantan'" style="width: 100%;height: 400px;"></div>

                    </div>
                    <div class="tabc_title">
                        <span>设备信息</span>
                    </div>
                    <div class="tabc_content">
                        <div class="tabcc_title">
                            <span>设备名称:</span>
                            <span>{{deviceInfo.name}}</span>
                        </div>
                        <div class="tabcc_title">
                            <span>设备KEY:</span>
                            <span>{{deviceInfo.device_bd_key}}</span>
                        </div>
                        <div class="tabcc_title">
                            <span>设备单位:</span>
                            <span>{{deviceInfo.unit}}</span>
                        </div>
                        <div class="tabcc_title">
                            <span>设备类型:</span>
                            <span>{{deviceInfo.device_type_name}}</span>
                        </div>
                        <template v-for="json in deviceWarning">
                            <div class="tabcc_title">
                                <span>{{ colorList[json.warning_type]}}报警值:</span>
                                <span :style="{color:json.warning_type=='yellow'?'#ffd600':json.warning_type}">{{json.warning_value}}</span>
                            </div>
                        </template>
                        
                    </div>
                </div>
                


            </el-tab-pane>
  

        </el-tabs>
      


       




                        
      




 



        
    </div>
</template>

<script>
import homeapi from '@/api/tailings_monitoring_service_smos_api.js'
import until from '@/api/until.js'
import * as echarts from 'echarts';
export default {
    data() {
        return {
            list: null,
            listLoading: true,
            queryParms:{
                page:1,
                page_size:10,
                name:"",
                device_id:'',
                timeList:[],
                device_type:"",
                total:0
               
            },
            form:{
                app_id:"",
                name:"",
                device_bd_key:"",
                intro:"",
                device_type:"",
                unit:"",
                photo:"",
                
            },
            dialogFormVisible:false,
            formLabelWidth:'100px',
            projectList:[],
            app_id:"",
            deviceTypeList:[],

            drawer:false,
            nowItem:{},

            devicePositionList:[],
            posititonForm:{
                app_id:"",
                device_id:"",
                gps_lng:"",
                gps_lat:"",
                face_img_coordinate:"",
            },

            dialogPositionFormVisible:false,
            map:null,
            maker:null,
            colorList:{
                'yellow':'黄色报警',
                'red':"红色报警",
                'blue':"蓝色报警",
                'orange':'橙色报警'
            },
            deviceList:[],
            activeName:"1",
            deviceInfo:{},
            deviceWarning:[],
            dryBeachInfo:{
                view_img:""
            },
            osmometerList:[],
            marginData:-30,
            beachList:[],
        }
    },
    watch:{
        app_id(){
            until.setCookie("app_id",this.app_id)
            this.getDeviceList();
            
           
       
        },
        activeName(){
            if(this.activeName=="2"){
                this.getDevicInfo()
                this.getDevicWarning();
            }
        
        }
    },
    created() {
        
        this.fetchData();
    },
    methods: {
        getTimeCount(){
            let timeTxt=""
            timeTxt=until.formatDateNoYear(new Date().getTime()-7*24*60*60*1000)+"至"+until.formatDateNoYear(new Date())
            return timeTxt
        },
        //获取干摊
        async getbeachList(){
            let page=1;
            let page_size=99999
            let app_id=this.app_id
            let name=""
            let data=await homeapi.Smos_apiCross_sectionPageGet({page,page_size,app_id,name});
            if(data.error_code==0){
                data.data.list.map(res=>{
                    res.devices.map(json=>{
                        json.face_img_coordinate_info=json.face_img_coordinate? JSON.parse(json.face_img_coordinate):{imgX:0,imgY:0}
                    })
                })
                this.beachList=data.data.list;

            }
        },
        
  
         //获取干摊
        async getDeviceList(){
        
            let app_id=this.app_id
            let data=await homeapi.Smos_apiDeviceDry_beachGet({app_id});
            if(data.error_code==0){
               this.dryBeachInfo=data.data
               
            }
        },
    

        
        //获取设备信息
        async getDevicInfo(){
            let app_id=this.app_id
            let device_id=this.dryBeachInfo.dry_beach_device_id
            let data=await homeapi.Smos_apiDeviceDetailGet({app_id,device_id});
            if(data.error_code==0){
                this.deviceInfo=data.data;
            }
        },
        //获取设备报警设置
        async getDevicWarning(){
            let app_id=this.app_id
            let device_id=this.dryBeachInfo.dry_beach_device_id
            let data=await homeapi.Smos_apiDevice_warningAllGet({app_id,device_id});
            if(data.error_code==0){
                this.deviceWarning=data.data.list;
                this.getDeviceDataList();
            }
        },
        
        async getDeviceDataList(){
            let form=this.queryParms;
            form.device_id=this.dryBeachInfo.dry_beach_device_id
            form.begin_time=parseInt(new Date().getTime()/1000) -7*24*60*60
            form.end_time=parseInt(new Date().getTime()/1000)
          
            form.app_id=this.app_id;
            let data=await homeapi.Smos_apiDevice_dataPageGet(form);
            if(data.error_code==0){
             
                this.createNextTu(data.data.list?data.data.list:[])
                
               
            }
        },


        createNextTu(data){
            data=data.reverse()
            let xData=[];
            let yData=[];

            let min=0;
            let max=0;
            let valueData=[];

            let  colors=["#6400ff","#00fff5","#a198c3","#000000"]

            // for(let i=0;i<xData[0].real_value.length;i++){
            //     yData.push()
            // }
            
            data[0].real_value.map((res,index)=>{
             
                if(res.value_key!=='d_variation_plane_x' && res.value_key!=='d_variation_plane_y' && res.value_key!='d_variation_plane_h'){
                    yData.push({
                        name:res.value_name,
                        value_key:res.value_key,
                       color:colors[index%4],
                        data:[],
                        type: 'line',
                        smooth: true
                    })
                }
               
            })
           
            this.deviceWarning.map(res=>{
                console.log(res.warning_value)
                if(res.warning_value!=0){
                  
                    let colorValue=res.warning_type=='yellow'?'#ffd600':res.warning_type
                    valueData.push(res.warning_value)
                    let dataValue=[];
                    data.map(json=>{
                        dataValue.push(parseFloat(res.warning_value))
                    })
                    yData.push({
                        name:this.colorList[res.warning_type],
                        color:colorValue,
                        data:dataValue,
                        type: 'line',
                        smooth: true

                    })
                }
               
            })
            console.log(yData)
         
            data.map(res=>{
                xData.push( until.formatDateNoYear(res.time*1000))
                res.real_value.map(json=>{
                 
                    yData.map(item=>{
                        
                        if(json.value_key==item.value_key){
                          
                            valueData.push(parseFloat(json.value))
                            item.data.push(parseFloat(json.value))
                        }
                    })
                    
                })
                
               

            })
       
            min=Math.min(...valueData)-1;
            max=Math.max(...valueData)+1;
        
            
            var myChart = echarts.init(document.getElementById('echarts_gantan'));
          
            var option = {
                tooltip: {
                    trigger: 'axis',
                        position: function (pt) {
                        return [pt[0], '10%'];
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xData
                },
                yAxis: {
                    type: 'value',
                    min:min,
                    max:max
                   
                },
                grid:{
                    left:50,
                    right:30,
                    top:30,
                },
                series: yData
            };
         
            myChart.setOption(option)
        },

 


        async fetchData() {
            let form=this.queryParms
            let data=await homeapi.Smos_apiAppPageGet(form);
            if(data.error_code==0){
                this.listLoading=false;
                this.projectList=data.data.list;
                this.$nextTick(()=>{
                    let app_id=until.getCookie("app_id");
                    if(app_id){
                        this.app_id=parseInt(app_id) 
                    }
                    else{
                        this.app_id=data.data.list[0].app_id;
                    }
                    
                    this.getbeachList();
              
                })
               
                
               
            }
        },
      
    
        createTu(){
       
          
            let xData=[];
            let yData=[];
          
            let yDataNext=[];
            for(let i=0;i<2;i++){
                xData.push("")
                yData.push(0)
            }
           
     
         
            this.osmometerList.osmometer_datas.map(res=>{
                xData.push(res.device_name)
                yData.push(parseFloat(res.soakage))
            })
            xData.push("干摊")
          
            xData.push("水位")


         
            yData.push(3)
          
            yData.push(4)

            console
            const maxNumber = Math.max(...yData)+1;
            console.log(maxNumber)
            yData.map(res=>{
                if(res){
                    yDataNext.push(maxNumber-res)
                }
                else{
                    yDataNext.push(0)
                }
                
            })
            
            var myChart = echarts.init(document.getElementById('echarts'));
     
            var option = {
                graphic: {
                    type: 'image',
                    left: 'center',
                
                    bottom:50,
                    style: {
                        image: this.dryBeachInfo.view_img, // 图片路径
                        width: 900, // 图片宽度
                        height: 368  // 图片高度
                    }
                },
                tooltip: {
                    trigger: 'axis',
                        position: function (pt) {
                        return [pt[0], '10%'];
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xData,
                    splitLine:{
                        show:false
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: { // 隐藏Y轴
                        show: true
                    },
                    axisTick: { // 隐藏刻度线
                        show: false
                    },
                    splitLine:{
                        show:false
                    },
                    axisLabel: { // 隐藏标签
                        show: false,
                        interval:1,
                       
                    },
                    max:maxNumber-2

                    
                },
                grid:{
                    left:50,
                    right:30,
                    top:30,
                },
                series: [{
                 
                    
                        data:yDataNext,
                        type: 'scatter',
                        smooth: true,
                        symbolSize: function (data) {
                            console.log(data)
                            return data === 0 ? 0 : 20; // 如果值为0，symbolSize为0，否则为5
                        }
                }]
            };
        
            myChart.setOption(option)
        },

           
         
    }
}
</script>
<style lang="css" scoped>
    .upload_div{
        width: 160px;
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ddd;
        border-radius: 8px;
        position: relative;
        float: left;
    
        margin-left: 10px;
        

    }
    .upload_div input{
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
    }
    .imgdiv{
        width: 120px;
        
    }
    .imgdiv img{
        width: 100%;
       
    }
    .upload_div i{
        font-size: 32px;
    }
    .imgMainDiv{
        width: 160px;
        height: 160px;
        float: left;
    }
    .imgMainDiv img{
        width: 100%;
        height: 100%;
    }
    .tab_content{
        width: 100%;
        height: calc(100vh - 300px);
    }
    .tabc_div{
        font-size: 14px;
        color: #666666;
        margin-top: 15px;
    }
    .tabc_title{
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        margin-top: 15px;
    }
    .tabc_content{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: 0px;
        flex-wrap: wrap;
    }
    .tabcc_title{
        flex: 1;
        min-width: 25%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: 30px;
        font-size: 16px;
        color: #666666;
    }
    .tabcc_title span:last-child{
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        margin-left: 5px;
    }

    #echarts{
        border-bottom: 1px solid #333333;
        border-left: 1px solid #333333;
        position: relative;
    }
    .div_list{
        width: 400px;
        height: 180px;
   
        position: absolute;
        left: 232px;
        top: 150px;
    }
    .div_main{
        width: 100%;
        height: 100%;
        position: relative;
      
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .divm_div{
        width: 5px;
        height: 60px;
        background: #ab6906;
        border-radius: 5px;
        cursor: pointer;
        display: inline-block;
    }
    .divm_txt{
        width: 100%;
        height: 100%;
        position: relative;
       

    }
   .divm_txt_main{
         display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        margin-top: 100%;
        position: absolute;
        width: 200px;
        left: -100px;
        bottom: -20px;
       
   }
   .cd_title{
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    line-height: 25px;
   }
   .cd_txt{
    font-size: 14px;
    color: #333333;
    line-height: 25px;
   }
   .water_div{
    position: absolute;
    right: 120px;
    top: 156px;
   }
   .title_main{
    width: 100%;
    height: 45px;
    font-size: 26px;
    font-weight: bold;
    color: #333333;
    line-height: 45px;
    padding-left: 100px;
    box-sizing: border-box;
    margin-top: 60px;
   }
   .water_xian{
    height: 1px;
    width: 177px;
    background: #0aff99;
    position: absolute;
    top: 50px;
    left: 506px;
   }
   .water_shuxian{
    width: 1px;
    height: 48px;
    background: #0aff99;
    position: absolute;
    top: 50px;
    left: 682px;
   }
   .echarts{
    background-size: 100% 100%;
    position: relative;
   }
   .echarts_title{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 18px;
    font-weight: bold;
    padding: 30px 30px;
    box-sizing: border-box;
   }

</style>